import React, {memo, useState, useEffect} from 'react'
import {Button, Space, Table, message, Tag, Modal} from 'antd'
import {ExclamationCircleOutlined} from '@ant-design/icons'
import {history, connect} from 'umi'
import type {ColumnsType} from 'antd/es/table'
import {getMenuList, deleteMenu} from '@/service/system/menu'
import styles from '@/assets/common/css/index.less'
import Permissions from '@/components/Permissions'
import {translateDataToTree} from '@/utils/common/index'

interface DataType {
	menuType: number
	adminList: any
	key: React.ReactNode
	name: string
	id: string | number
	parentId: number
	children?: DataType[]
}

const menuDom = memo((props: any) => {
	const orgId = props?.user?.orgId
	const [loading, setLoading] = useState(false)
	const [dataSource, setDataSource] = useState<any[]>([])
	const [expandedRowKey, setExpandedRowKeysSource] = useState([])
	const [selectId, setSelectedId] = useState('')
	// 获取表格数据
	const onListFun = () => {
		setLoading(true)
		getMenuList()
			.then((res: any) => {
				if (res.data.length) {
					const list = translateDataToTree(res.data)
					setDataSource(list as any)
					setExpandedRowKeysSource([1] as any)
				}
				setLoading(false)
			})
			.catch(() => {
				setLoading(false)
			})
	}
	// 单选事件
	const rowSelection = {
		onChange: (selectedRowKeys: any) => {
			setSelectedId(selectedRowKeys)
		},
	}

	// 新增方法
	const onAddFun = () => {
		history.push({
			pathname: '/system/menu/add',
		})
	}

	// 修改方法
	const onEditFun = () => {
		history.push({
			pathname: '/system/menu/edit',
			query: {
				id: selectId,
			},
		})
	}
	// 删除方法
	const onDeleteFun = () => {
		Modal.confirm({
			title: '要删除吗？',
			icon: <ExclamationCircleOutlined />,
			content: '',
			okText: '确认',
			cancelText: '取消',
			onOk() {
				deleteMenu(selectId).then((res: any) => {
					if (res?.success) {
						message.success(res.msg)
						onListFun()
					}
				})
			},
		})
	}

	const columns: ColumnsType<DataType> = [
		{
			title: '菜单名称',
			dataIndex: 'name',
			key: 'name',
			width: 200,
			ellipsis: true,
			align: 'left',
			render: (text: any) => <Space size="middle">{text || '--'}</Space>,
		},
		// {
		// 	title: '图标',
		// 	dataIndex: 'icon',
		// 	key: 'icon',
		// 	ellipsis: true,
		// 	width: 100,
		// 	align: 'center',
		// 	render: (text: any) => <Space size="middle">{text || '--'}</Space>,
		// },
		{
			title: '类型',
			dataIndex: 'menuType',
			key: 'menuType',
			ellipsis: true,
			width: 100,
			align: 'center',
			render: (text: string, record: any) => {
				if (record.menuType === 0) {
					return <Tag color="processing">目录</Tag>
				}
				if (record.menuType === 1) {
					return <Tag color="processing">菜单</Tag>
				}
				return <Tag color="processing">按钮</Tag>
			},
		},
		{
			title: '排序号',
			dataIndex: 'sort',
			key: 'sort',
			ellipsis: true,
			width: 100,
			align: 'center',
			render: (text: any) => <Space size="middle">{text || '--'}</Space>,
		},
		{
			title: '当前路径',
			dataIndex: 'componentPath',
			key: 'componentPath',
			ellipsis: true,
			width: 200,
			align: 'center',
			render: (text: any) => <Space size="middle">{text || '--'}</Space>,
		},
		{
			title: '菜单URL',
			dataIndex: 'path',
			key: 'path',
			ellipsis: true,
			width: 200,
			align: 'center',
			render: (text: any) => <Space size="middle">{text || '--'}</Space>,
		},
		{
			title: '授权标识',
			dataIndex: 'code',
			key: 'code',
			width: 350,
			ellipsis: true,
			align: 'center',
			render: (text: any) => <Space size="middle">{text || '--'}</Space>,
		},
	]
	useEffect(() => {
		// 初始化表格
		onListFun()
	}, [orgId])

	return (
		<div className={styles.content}>
			<div className="btnlist">
				<Space size={12}>
					<Permissions permissionID="amc_system_permission_menu_add">
						<Button
							type="primary"
							ghost
							size="small"
							onClick={() => onAddFun()}>
							新增
						</Button>
					</Permissions>
					<Permissions permissionID="amc_system_permission_menu_edit">
						<Button
							className="warning"
							ghost
							size="small"
							disabled={!selectId}
							onClick={() => onEditFun()}>
							编辑
						</Button>
					</Permissions>
					<Permissions permissionID="amc_system_permission_menu_delete">
						<Button
							className="import"
							ghost
							size="small"
							onClick={() => onDeleteFun()}>
							删除
						</Button>
					</Permissions>
				</Space>
			</div>
			<Table
				rowKey={(record) => record.id}
				rowSelection={{
					type: 'radio',
					...rowSelection,
				}}
				scroll={{y: 660}}
				columns={columns}
				dataSource={dataSource}
				bordered
				expandable={{defaultExpandedRowKeys: expandedRowKey}}
				loading={loading}
				pagination={false}
			/>
		</div>
	)
})
export default connect(({user}: any) => ({
	user,
}))(menuDom)
